<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>timecapsule</title>
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../sass/lll/timecapsule.min.css">
</head>

<body>

    <header>
        <section class="maxwidth">
            <section class="left">
                <div class="logobox">
                    <img src="../../img/logo (1).gif" alt="">
                    <span>时间胶囊</span>
                </div>
                <div>首页</div>
                <div id="addDiv">添加</div>
                <div id="openDiv">打开</div>
            </section>

            <div>回到胶囊日记</div>
        </section>
    </header>

    <section class="homepage">
        <div>
            <img src="../../img/logo_big.png" alt="">
            <div class="title">时间胶囊</div>
            <div class="buttonBox">
                <div class="btn">
                    <span class="english">Put</span>
                    <span class="chinese">添加</span>
                </div>
                <div class="btn">
                    <span class="english">Open</span>
                    <span class="chinese">打开</span>
                </div>
            </div>
            <div class="bottom">
                <span>什么是时间胶囊？</span>·<span>回胶囊日记</span>
            </div>
        </div>
    </section>

    <section class=""></section>


    <!-- 打开胶囊页面 -->
    <section class="openBox maxwidth"> 
        <h2>打开胶囊</h2>
        <div class="inputBox">
            <label for="keyInput">胶囊Key:</label>
            <input type="text" id="keyInput">
            <button>打开胶囊</button>
        </div>

        <section class="nocapsule">没有这个胶囊Key</section>

        <section class="tipbox" id="capsuleContent">
            <h2>${某} 在 ${时间} 对你说:</h2>
            <section class="content">${content}</section>
        </section>

        <section class="tipbox cannot"></section>
    </section>

    <!-- 添加胶囊页面 -->
    <section class="add maxwidth">
        <section class="writingBox">
            <h2>添加胶囊</h2>
            <div class="writeBox">
                <p>你的名字</p>
                <div class="errTip">名字 必须填写.</div>
                <div>
                    <input type="text" id="nameInput">
                </div>
            </div>
            <div class="writeBox">
                <p>你的邮箱</p>
                <div class="errTip">asdfg</div>
                <div>
                    <input type="text" id="emailInput">
                </div>
            </div>
            <div class="writeBox">
                <p>打开时间</p>
                <div class="errTip">asdfg</div>
                <div>
                    <input type="text" id="openTimeInput">
                    <span>打开时间之前，胶囊内容是看不到的。</span>
                </div>
            </div>
            <div class="writeBox">
                <p>胶囊内容</p>
                <div class="errTip">asdfg</div>
                <div>
                    <textarea id="contentArea" maxlength="5000"></textarea><br>
                    <span>胶囊内容不能超过5000字。</span>
                </div>
            </div>
            <div class="writeBox">
                <p>未到期提示信息</p>
                <div>
                    <textarea id="tipArea"></textarea><br>
                    <span>在 打开时间 之前打开胶囊，会看到提示信息。</span>
                </div>
            </div>
            <button>添加胶囊</button>
        </section>

        <section class="addOkBox">
            <!-- ba7f-b191-4dbd-094a-265f -->
            <h2>胶囊添加成功</h2>
            <div>
                <p>胶囊Key</p>
                <div>
                    <input type="text" id="addKeyInput">
                    <span>你可以复制 key自己保存，也可以发送给你的好友，让他来打开胶囊。</span>
                </div>
            </div>
        </section>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../../js/requestPre.js"></script>
    <script src="../../js/lll/timecapsule.js"></script>
</body>

</html>